<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Book Info Query</title>

<!-- BEGIN GLOBAL MANDATORY STYLES -->

<link href="${path}/css/basic/bootstrap.min.css" rel="stylesheet"
	type="text/css" />

<link href="${path}/css/basic/bootstrap-responsive.min.css"
	rel="stylesheet" type="text/css" />

<link href="${path}/css/basic/font-awesome.min.css" rel="stylesheet"
	type="text/css" />

<link href="${path}/css/basic/style-metro.css" rel="stylesheet"
	type="text/css" />

<link href="${path}/css/basic/style.css" rel="stylesheet"
	type="text/css" />

<link href="${path}/css/basic/style-responsive.css" rel="stylesheet"
	type="text/css" />

<link href="${path}/css/basic/default.css" rel="stylesheet"
	type="text/css" id="style_color" />

<link href="${path}/css/basic/uniform.default.css" rel="stylesheet"
	type="text/css" />

<!-- END GLOBAL MANDATORY STYLES -->

</head>

<body>

	<!-- BEGIN PAGE CONTAINER-->

	<div class="container-fluid">

		<!-- BEGIN PAGE HEADER-->

		<div class="row-fluid">

			<div class="span12">

				<!-- BEGIN PAGE TITLE & BREADCRUMB-->
				<h3 class="page-title">Book Info Query</h3>
				<ul class="breadcrumb">
					<li><i class="icon-home"></i> <a href="${path}/admin/main">Home</a>
						<i class="icon-angle-right"></i></li>
					<li>Book Info Query</li>
				</ul>
				<!-- END PAGE TITLE & BREADCRUMB-->

			</div>

		</div>

		<!-- END PAGE HEADER-->

		<!-- BEGIN PAGE CONTENT-->

		<div class="row-fluid">

			<div class="span12">

				<!-- BEGIN CONDENSED TABLE PORTLET-->

				<div class="portlet box green tabbable">

					<div class="portlet-title">
						<div class="caption">Book Info List</div>
						<div class="tools">
							<a href="javascript:;" class="collapse"></a>
						</div>
					</div>

					<div class="portlet-body form">
						<div class="clearfix">
							<c:if test="${sessionScope.readerInfo.roleId.name == 'Admin'}">
								<div class="btn-group">
									<button class="btn green"
										onclick="location.href='${path}/bookinfo/add'">
										Add Book <i class="icon-plus"></i>
									</button>
								</div>
							</c:if>
							<div class="btn-group pull-right">
								<label>Book Name: <input id="bookName" maxlength="15"
									class="m-wrap medium" type="text"
									placeholder="Search by Book Name" /> <select id="btypeId"
									class="small m-wrap">
										<option value="0">Search by type</option>
										<c:forEach items="${bookTypeList}" var="bookType">
											<option value="${bookType.id}">${bookType.name}</option>
										</c:forEach>
								</select>
									<button id="search_btn" class="btn green" onclick="search()">Search</button>
								</label>
							</div>
						</div>
						<div class="tab-content">
							<div class="tab-pane active" id="portlet_tab1">
								<div class="table-responsive">
									<table class="table table-bordered table-hover">
										<thead>
											<tr>
												<th>#</th>
												<th>Book Name</th>
												<th>Book Type</th>
												<th>Author</th>
												<th>Publisher</th>
												<th>Price</th>
												<th>Store Time</th>
												<th>City</th>
												<th>Quantity</th>
												<th>Comment</th>
												<c:if
													test="${sessionScope.readerInfo.roleId.name == 'Admin'}">
													<th>Delete Id</th>
													<th>Delete DateTime</th>
													<th>Edit</th>
													<th>Delete</th>
												</c:if>
											</tr>
										</thead>
										<tbody id="book_tbody">
											<c:forEach items="${list}" var="bookInfo" varStatus="vs">
												<tr>
													<td>${vs.count}</td>
													<td>${bookInfo.name}</td>
													<td>${bookInfo.bookType.name}</td>
													<td>${bookInfo.author}</td>
													<td>${bookInfo.publisher}</td>
													<td>${bookInfo.price}</td>
													<td>${bookInfo.storeTime}</td>
													<td>${bookInfo.city}</td>
													<td>${bookInfo.totalQuantity}</td>
													<td>${bookInfo.comment}</td>
													<c:if test="${sessionScope.readerInfo.roleId.name == 'Admin'}">
														<td>${bookInfo.deleteReader.name}</td>
														<td>${bookInfo.deleteDateTime}</td>
														<c:if test="${not empty bookInfo.deleteReader}">
															<td style="width: 60px"><a
																class="btn mini green disabled"
																href="javascript:void(0);"><i class="icon-edit"></i>
																	Edit</a></td>
															<td style="width: 70px"><a
																class="btn mini green disabled"
																href="javascript:void(0);"><i class="icon-trash"></i>
																	Delete</a></td>
														</c:if>
														<c:if test="${empty bookInfo.deleteReader}">
															<td style="width: 60px"><a class="btn mini green"
																href="${path}/bookinfo/update?id=${bookInfo.id}&btypeId=${bookInfo.bookType.id}"><i
																	class="icon-edit"></i> Edit</a></td>
															<td style="width: 70px"><a class="btn mini green"
																href="${path}/bookinfo/delete?id=${bookInfo.id}"><i
																	class="icon-trash"></i> Delete</a></td>
														</c:if>
													</c:if>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
								<div style="float: right; margin-right: 15px">
									<input style="float: right;" type="button" id="last" value="Last" class="btn btn-default" onclick="lastPage()" />
									<input style="float: right;" type="button" id="next" value="Next" class="btn btn-default" onclick="nextPage()" />
									<label style="float: right;" id="page"></label>
									<input style="float: right;" type="button" id="pre" value="Pre" class="btn btn-default" onclick="prePage()" />
									<input style="float: right;" type="button" id="first" value="First" class="btn btn-default" onclick="firstPage()" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>

		<!-- END PAGE CONTENT-->

	</div>

	<!-- END PAGE CONTAINER-->


	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

	<!-- BEGIN CORE PLUGINS -->

	<script src="${path}/js/basic/jquery-1.10.1.min.js"
		type="text/javascript"></script>

	<script src="${path}/js/basic/jquery-migrate-1.2.1.min.js"
		type="text/javascript"></script>

	<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->

	<script src="${path}/js/basic/jquery-ui-1.10.1.custom.min.js"
		type="text/javascript"></script>

	<script src="${path}/js/basic/bootstrap.min.js" type="text/javascript"></script>

	<!--[if lt IE 9]>

	<script src="${path}/js/basic/excanvas.min.js"></script>

	<script src="${path}/js/basic/respond.min.js"></script>  

	<![endif]-->

	<script src="${path}/js/basic/jquery.slimscroll.min.js"
		type="text/javascript"></script>

	<script src="${path}/js/basic/jquery.blockui.min.js"
		type="text/javascript"></script>

	<script src="${path}/js/basic/jquery.cookie.min.js"
		type="text/javascript"></script>

	<script src="${path}/js/basic/jquery.uniform.min.js"
		type="text/javascript"></script>

	<!-- END CORE PLUGINS -->

	<script src="${path}/js/basic/app.js"></script>
	<c:if test="${sessionScope.readerInfo.roleId.name == 'Admin'}">
		<script src="${path}/js/bookinfo/searchbook.js" type="text/javascript"></script>
	</c:if>
	<c:if test="${sessionScope.readerInfo.roleId.name == 'Reader'}">
		<script src="${path}/js/bookinfo/searchbook4reader.js"
			type="text/javascript"></script>
	</c:if>
	
	<script>
		jQuery(document).ready(function() {

			// initiate layout and plugins

			App.init();

		});
	</script>
</body>
</html>